<template>
  <div>
    <detailbanner :sightname="sightname" :bannerImg="bannerImg" :bannerImgs="bannerImgs"></detailbanner>
    <detailheader ></detailheader>
    <div class="content">
      <detaillist :list='list'></detaillist>
    </div>
  </div>
</template>

<script>
  import Banner from './components/Banner'
  import Header from './components/DetailHeader'
  import List from './components/DetailList'
  import axios from 'axios'

  export default {
    name: "Detail",
    components: {
      "detailbanner": Banner,
      "detailheader": Header,
      "detaillist": List
    },
    data() {
      return {
        sightname: '',
        bannerImg: '',
        bannerImgs:[],
        list: []
      }
    },
    methods:
      {
        getDetailData() {
          axios.get('/api/detail.json',
            {
              params: this.$route.params.id
            }
          ).then(this.handleGetData)
        }
        ,
        handleGetData(res) {
          res = res.data;
          if (res.ret && res.data) {
            const data = res.data;
            this.sightname = data.sightName;
            this.bannerImg = data.bannerImg;
            this.bannerImgs = data.bannerImgs;
            this.list = data.categoryList;
          }
        }
      }
    ,
    mounted() {
    },
    activated() {
      this.getDetailData();
    }
  }
</script>

<style lang="stylus" scoped>
  .content {
    height 50rem
  }

</style>
